import React, { Component } from 'react';
//导入本地图片

import { TabBar } from 'antd-mobile'
import {withRouter} from 'react-router-dom'
import {
    AppOutline,
    MessageOutline,
    MessageFill,
    UnorderedListOutline,
    UserOutline,
  } from 'antd-mobile-icons'
class MyTabbar extends Component {
    //定义组件状态
    constructor (props){
        super(props);
        this.state={
          key:'',
            tabarlist:[
                {
                    key: '/index/home',
                    title: '店铺',
                    icon: <AppOutline />,
                    
                  },
                {
                    key: '/index/classify',
                    title: '分类',
                    icon: <MessageOutline />,
                    
                  },
                  {
                    key: '/index/goods',
                    title: '全部商品',
                    icon: <UnorderedListOutline />,
                    
                  },
                  {
                    key: '/index/shoppcat',
                    title: '购物车',
                    icon: <MessageFill />,
                    
                  },
                  
                  {
                    key: '/index/mine',
                    title: '个人中心',
                    icon: <UserOutline />,
                    
                  },
            ]
        }
 
    }
    componentDidMount(){
      this.props.history.push(this.setState.key);
    }
    handleChange(key){
      /* 问题: 当前组件 MyTabbar 不是路由规则中的组件, 那么该组件的props默认就是{}, 就不具备跳路由的能力 , 默认情况下 必须是经过路由匹配渲染的组件, 其props中才有location,match,history三个路由对象*/
      /* 这时可以用 withRouter 高阶组件 处理一下, 处理完以后MyTabbar组件的props中就有了location,match,history三个路由对象*/
      this.setState({
        key:key
      })
      
      this.props.history.push(key);
      
  }
    
    render() {
        return (
            <div className='mytabbar'>
                <TabBar className='mytabbar_1' onChange={(key)=>{ this.handleChange(key) }} activeKey={this.props.location.pathname}>
                    {
                        this.state.tabarlist.map(item => (
                            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                        ))
                    }
                </TabBar>
            </div>
        );
    }
}

export default withRouter(MyTabbar);